<script setup lang='ts'>
import { inject, onBeforeUnmount, ref } from 'vue';
import { createVueDisposer, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import RightList from '../../components/RightList.vue';
import Button from '../../components/Button.vue';
import { XbsjEarthUi } from '../../scripts/xbsjEarthUi';
import EnableContour from './putColor/EnableContour.vue';
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const disposer = createVueDisposer(onBeforeUnmount);
const shadingMode = toVR<string>(disposer, [xbsjEarthUi.globeMaterial, "shadingMode"])
const enableContour = toVR<boolean>(disposer, [xbsjEarthUi.globeMaterial, "enableContour"])
const controlList: { type: string, zh: string, icon: string, leftButton: boolean }[] = [
    {
        type: 'elevation',
        zh: '高程',
        icon: 'gaocheng',
        leftButton: true,

    },
    {
        type: 'slope',
        zh: '坡度',
        icon: 'podu',
        leftButton: false,
    },
    {
        type: 'aspect',
        zh: '坡向',
        icon: 'poxiang',
        leftButton: true,
    }
];
</script>
<template>
    <RightList :title="'着色'">
        <Button v-for="item in controlList" :name="item.icon" :content="item.zh"
            :click="() => { shadingMode === item.type ? shadingMode = 'none' : shadingMode = item.type }"
            :left-button="item.leftButton" :actived="shadingMode === item.type"></Button>
        <Button :name="'denggaoxian'" :content="'等高线'" :click="() => { enableContour = !enableContour }"
            :left-button="false" :actived="enableContour"></Button>
        <EnableContour v-if="enableContour"></EnableContour>
    </RightList>
</template>